<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开始阅读</title>
    <link rel="stylesheet" type="text/css" href="CSS/all.css"  th:href="@{/CSS/all.css}"/>
    <link rel="stylesheet" type="text/css" href="CSS/read.css"  th:href="@{/CSS/read.css}"/>
    <script th:src="@{/JS/jquery.js}"></script>

</head>
<body>
    <header>
        <div style="position: absolute;padding: 0 10px;height: 28px;margin: 0px 10px;line-height: 28px;font-size: 14px;background-color: #65bbec;border-radius: 3px;width: 30px;    top: calc((100% - 28px) / 2);">
        <a onclick="goback()" style="color: #fff;">返回</a>
        </div>
        <span style="    display: inline-block; width: 61%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">[[${chapterInfo['chapterInfo'].title}]]</span>
        <!--<a th:href="@{/Story/getAllCategoryStoryList(isLogin='')}">首页</a></header>-->
        <div class="goBackC" style="    color: #fff;position: absolute;padding: 0 10px;width: 30px;height: 28px;margin: 0px 10px;line-height: 28px;text-align: center;border-radius: 3px;right: 0;top: 0;font-size: 14px;background-color: #65bbec;    top: calc((100% - 28px) / 2);">
            <a th:href="@{/Story/getAllCategoryStoryList(isLogin='')}" style="color: #fff;">首页</a>
        </div>
    </header>
    <div class="control">
        <label >字体大小:</label>
        <span >大</span>
        <span >中</span>
        <span >小</span>
        <div>
            <span class="readspan" onclick="readms(this)">阅读模式</span>
            <span class="hyspan" onclick="hy(this)">护眼</span>
            <span class="gdspan" onclick="gd(this)">关灯</span>
        </div>
    </div>
    <main class="xscontent">
        <div class="cz">
            <a th:href="@{/Story/forward(chapterId=${chapterInfo['chapterInfo'].id},bookId=${chapterInfo['chapterInfo'].bookId})}">上一章</a>
            <a th:href="@{/Story/goReadHome(bookId=${chapterInfo['chapterInfo'].bookId})}">回目录</a>
            <a th:href="@{/Story/back(chapterId=${chapterInfo['chapterInfo'].id},bookId=${chapterInfo['chapterInfo'].bookId})}">下一章</a>
            <a th:data-value1="${chapterInfo['chapterInfo'].id}" th:data-value2="${chapterInfo['chapterInfo'].bookId}"  onclick="getsj(this)" >加入书架</a>
        </div>
            <div class="neirong" th:utext="${chapterInfo['content']}">
            </div>
            <div class="cz">
                <a th:href="@{/Story/forward(chapterId=${chapterInfo['chapterInfo'].id},bookId=${chapterInfo['chapterInfo'].bookId})}">上一章</a>
                <a th:href="@{/Story/goReadHome(bookId=${chapterInfo['chapterInfo'].bookId})}">回目录</a>
                <a th:href="@{/Story/back(chapterId=${chapterInfo['chapterInfo'].id},bookId=${chapterInfo['chapterInfo'].bookId})}">下一章</a>
                <a th:data-value1="${chapterInfo['chapterInfo'].id}" th:data-value2="${chapterInfo['chapterInfo'].bookId}"  onclick="getsj(this)">存书签</a>
            </div>
            <div class="recommend" th:data-value2="${chapterInfo['chapterInfo'].bookId}" onclick="recommend(this)" style="margin-top:10px;">推荐一下</div>
    </main>
    <a class="gg" href="">
        <button onclick="closegg(event)">X</button>
        <img src="" alt="">
    </a>
    <footer>
            本站所有小说为转载作品，所有章节均由网友上传，转载至本站只是为了宣传本书让更多读者欣赏。
    </footer>
</body>

<script th:inline="javascript">
    function closegg(e){
        e.preventDefault();

        $('a.gg').hide();
    }
    var timer=1000;
    $.ajax({
        url:'/Adver/selectAdverPollingTime',
        async:false,
        type:'POST',
        success:function(res){
            timer=(res.data)*1;
            setInterval(function(){
                console.log("加载中---")
                $.post('/Adver/selectAdverAllOpen',function(res){
                    console.log(res)
                    $('a.gg').show();
                    $('a.gg').attr('href',res.data.hrefUrl);
                    $('a.gg>img').attr('src',res.data.advertisementsImgUrl);
                });
            },timer);
        }
    });



    function recommend(that) {
        console.log(that)
        $.ajax({
            type:'POST',
            url:'/recommend/addOrEdit',
            data:{
                bookId:that.dataset['value2'],
                userId:null,
            },
            success:function(res){
                alert(res.data);
            }
        })
    }

    function getsj(that){
        console.log(that.dataset['value2'])
        console.log(that.dataset['value1'])
        $.ajax({
            type:'POST',
            url:'/Store/addOrEdit',
            data:{
                bookId:that.dataset['value2'],
                userId:null,
                chapterId:that.dataset['value1'],
            },
            success:function(res){

                alert(res.data);

            }
        })

    }

        if(sessionStorage.getItem('readms')){

            readms(document.querySelector('span.readspan'));
        }
    function readms(that){

        if(that.textContent=='阅读模式'){
            $('div.cz').hide();
            that.textContent='退出阅读模式';
            $('footer').hide();
            sessionStorage.setItem('readms',true);

            $('body').scroll(function(e){
                var id=[[${chapterInfo['chapterInfo'].id}]];
                var bookId = [[${chapterInfo['chapterInfo'].bookId}]];

                if(document.querySelector('body').scrollHeight-e.target.scrollTop<=e.target.offsetHeight){
                        location.href='/Story/back?bookId='+bookId+'&chapterId='+id+''

                }
            })

        }
        else{
            $('div.cz').show();
            that.textContent='阅读模式';
            $('footer').show();
            $('body').unbind('scroll')
            sessionStorage.removeItem('readms');
        }


    }
    function goback(){
        history.back(-1);
    }

</script>
<script th:src="@{/JS/read.js}"></script>
</html>
